<template>
  <div class="seeDoctor-content">
    <!-- 寻医顶部搜索 -->
    <header>
      <span class="city">
        健康 · <span @click="goToCity" class="cityName">{{ loCityName }}</span>
        <!-- <van-icon name="arrow-down" /> -->
      </span>
      <van-search v-model="value" placeholder="搜索医生、科室、疾病" />
    </header>
    <!-- 图片导航 -->
    <div class="nav">
      <div class="nav-top">
        <div class="nav-top-1 nav-top-item">
          <img src="https://z3.ax1x.com/2021/07/08/RXlobd.png" alt="" />
          <div>
            <p>快速问医</p>
            <p class="num"><span>3千+</span>医生在线</p>
          </div>
        </div>
        <div class="nav-top-1 nav-top-item">
          <img src="https://z3.ax1x.com/2021/07/08/RXlzrQ.png" alt="" />
          <div>
            <p>名医工作室</p>
            <p class="num"><span>24</span>小时名医在线</p>
          </div>
        </div>
      </div>
      <div class="nav-down">
        <div class="nav-down-item">
          <img src="https://z3.ax1x.com/2021/07/08/RX19Vs.png" alt="" />
          <div>
            <p class="title">患者力荐</p>
            <p>省时省心省力</p>
          </div>
        </div>
        <div class="nav-down-item">
          <img src="https://z3.ax1x.com/2021/07/08/RXlxKg.png" alt="" />
          <div>
            <p class="title">专科服务</p>
            <p>问诊一站式服务</p>
          </div>
        </div>
        <div class="nav-down-item">
          <img src="https://z3.ax1x.com/2021/07/08/RX1Sbj.png" alt="" />
          <div>
            <p class="title">三甲医生</p>
            <p>甄选优质医生</p>
          </div>
        </div>
      </div>
    </div>

    <!-- 找医生 -->
    <div class="seeDoctor">
      <div class="office">
        <span>找医生</span>
        <span @click="goToAllDepartments">全部科室></span>
      </div>

      <ul class="officeList">
        <div
          class="officeItem"
          v-for="(item, index) in tabList"
          :key="index"
          :class="{ bolder: index === num }"
          @click="goTo(item.id, index)"
        >
          <!-- <img :src="item.url" alt="" /> -->
          <span :class="item.className"></span>
          <p>{{ item.tab }}</p>
        </div>
      </ul>
    </div>
    <!-- 医生信息 -->
    <div class="doctorMsg">
      <ul>
        <li class="doctorMsg-item" v-for="(item, index) in list" :key="index">
          <div class="msgImg">
            <img :src="item.imgUrl" alt="" />
          </div>
          <div class="msg">
            <p class="name">
              {{ item.name }}<span>{{ item.Position }}</span>
            </p>
            <p class="hospt">
              {{ item.hospital }}<span>{{ item.Departments }}</span>
            </p>
            <p class="number">
              <span class="num num1">{{ item.Praise }}</span
              >好评率<span class="num num2">{{ item.consult }}</span
              ><span>咨询量</span>
            </p>
            <p class="good">
              {{ item.adept }}
            </p>
            <div class="phone">
              <p class="price">
                电话￥<span>{{ item.phonePrice }}</span
                ><span>图文￥</span><span>{{ item.textPrice }}</span>
              </p>
              <div class="ask">问医生</div>
            </div>
            <div class="consult">
              <span>专病</span>
              <span>{{ item.supplement }}</span>
              <van-icon name="arrow-down" />
            </div>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import "../../assets/css/SeeDoctor.css";
import { getSeeDoctorApi } from "../../utils/api";

export default {
  props: {
    name: String,
  },
  data() {
    return {
      active: 0,
      value: "",
      tabList: [
        {
          tab: "推荐",
          path: "/home/seeDoctor/recommend",
          className: "iconfont icon-dianzan",
          id: "1",
        },
        {
          tab: "妇产科",
          path: "/home/seeDoctor/woman",
          className: "iconfont icon-huaiyun",
          id: "2",
        },
        {
          tab: "儿科",
          path: "/home/seeDoctor/child",
          className: "iconfont icon-haizi",
          id: "3",
        },
        {
          tab: "内科",
          path: "/home/seeDoctor/internal",
          className: "iconfont icon-visfat",
          id: "4",
        },
        {
          tab: "外科",
          path: "/home/seeDoctor/surgery",
          className: "iconfont icon-chuangkoutie",
          id: "5",
        },
        {
          tab: "皮肤科",
          path: "/home/seeDoctor/dermatology",
          className: "iconfont icon-shouzhang",
          id: "6",
        },
      ],
      list: [],
      typeid: "",
      num: 0,
    };
  },
  methods: {
    async get(id) {
      const res = await getSeeDoctorApi({
        typeid: id,
      });
      this.list = res.result;
    },
    async goTo(id, index) {
      const res = await getSeeDoctorApi({
        typeid: id,
      });
      this.list = res.result;
      this.num = index;
    },
    goToAllDepartments() {
      this.$router.push("/home/seeDoctor/allDepartments");
    },
    goToCity() {
      this.$router.push("/home/city");
    },
    async getCityName() {
      let loCityName = localStorage.getItem("city") || "杭州";
      let cityName = document.querySelector(".cityName");
      cityName.innerHTML = loCityName;
    },
  },
  mounted() {
    this.get("1");
    this.getCityName();
  },
};
</script>

<style lang="less" scoped>
.seeDoctor-content {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0px;
  overflow-x: scroll;
  white-space: nowrap;

  ::-webkit-scrollbar {
    width: 0 !important;
  }

  ::-webkit-scrollbar {
    width: 0 !important;
    height: 0;
  }
}
</style>
